// 主色调
$main_blue: #0054A6;
// 主色调hover
$main_blue_hover: #004080;
// border颜色
$border_color: #f0f0f0;
// 背景变色
$background_hover_color: #f4f4f4;
// 图片测试背景色
$img_color: transparent;
// 主背景色
$main_bg_color: #F5F8FA;

@mixin flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  align-content: flex-start;
}

@mixin flexsb {
  @include flex;
  justify-content: space-between;
}


@mixin bbox {
  box-sizing: border-box;
}

// 文字两端对齐 
@mixin textjustify {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
}

// 默认过渡
@mixin transition($time: 0.2s) {
  transition: all $time ease-in-out;
}

// 隐藏滚动条
@mixin hidescrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;

  &::-webkit-scrollbar {
    width: 0 !important
  }
}

// 禁止用户选中
@mixin u_sel_none {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

@mixin scrollbar {
  /*滚动条样式*/
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    border-radius: 0;
    // background: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0);

  }
}

// 多行截取
@mixin multi_line_intercept($line:2){
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
// 单行截取
@mixin single_line_intercept(){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
// 头像
@mixin avatar($wh:44px,$border-radius:4px){
  width: $wh;
  height: $wh;
  border-radius: $border-radius;
  display: block;
  background-color: $img_color;
}
// placeholder
@mixin placeholder($color:#ccc, $fontweight: normal){
  &::-webkit-input-placeholder { /* WebKit browsers */
    color: $color;
    font-weight: $fontweight;
  }
  
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: $color;
    font-weight: $fontweight;
  }
  
  &:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: $color;
    font-weight: $fontweight;
  }   
}

@mixin background($width: 100%, $height: 100%){
  background: {
    size: $width, $height;
    repeat: no-repeat;
    position: center;
  }
}

// 两端对齐文本
@mixin text_justify{
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}